<template>
  <div :class="$style.container">
    <ul>
      <li 
        v-for="item in lists" 
        :key="item.doubanId+tab"
        @click.stop="handleItemClick(item)"
      >
        <div :class="$style.left">
          <img 
            :src="item.poster" 
            alt="">
          <div :class="$style.info">
            <h4 :class="$style.title">{{ item.original_title }}</h4>
            <p :class="$style.count">数量: 1</p>
          </div>
        </div>
        <div :class="$style.right">
          <span :class="$style.price">总价: ￥{{ item.price || 0 }}</span>
          <span 
            v-if="tab!=='comment'" 
            :class="$style.status">{{ item.status === 0 ? '待付款' : item.status === 1 ? '待使用': '' }}</span>
          <span 
            v-else
            :class="$style.status">待评价</span>
        </div>
      </li>
      <div v-if="lists.length === 0">
        <p 
          v-if="tab==='all'" 
          :class="$style.noData"
        >对不起，您还没有订单</p>
        <p 
          v-if="tab==='wait'" 
          :class="$style.noData" 
        >对不起，没有需要付款的订单</p>
        <p 
          v-if="tab==='use'" 
          :class="$style.noData" 
        >对不起，没有可以使用的订单</p>
        <p 
          v-if="tab==='comment'" 
          :class="$style.noData" 
        >对不起，没有可以评论的订单</p>
      </div>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    tab: {
      type: String,
      default: ''
    },
    lists: {
      type: Array,
      default: () => []
    },
    comments: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleItemClick(item) {
      if (item.status === 0) {
        this.$router.push({
          path: '/cashier',
          query: {
            id: item.orderId
          }
        })
      } else {
        this.$router.push({
          path: '/detail',
          query: { id: item.doubanId }
        })
      }
    }
  }
}
</script>

<style lang='scss' module>
.container {
  ul {
    li {
      border-bottom: 1px solid #e5e5e5;
      padding: 15px 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      &:first-child {
        padding-top: 0px;
      }
      .left {
        img {
          width: 90px;
          height: 90px;
          border-radius: 4px;
          object-fit: cover;
          vertical-align: -23px;
        }
        .info {
          display: inline-block;
          .title {
            font-size: 16px;
            color: #222;
            margin: 10px 0 10px 15px;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 300px;
          }
          .count {
            font-size: 12px;
            color: #666;
            margin-left: 15px;
            height: 18px;
          }
        }
      }
      .right {
        margin-right: 100px;
        .price {
          margin-right: 150px;
          font-size: 12px;
          color: #666;
          line-height: 90px;
          text-align: center;
          width: 200px;
        }
        .status {
          font-size: 12px;
          color: #333;
          line-height: 90px;
          text-align: center;
          width: 100px;
        }
      }
    }
    .noData {
      padding: 40px 0;
      text-align: center;
      font-size: 14px;
      color: #666;
    }
  }
}
</style>
